<template>
  <view class="container">
    <view class="product-list">
      <view class="product-item" v-for="(product, index) in products" :key="index">
        <image :src="product.image" class="product-image" @error="setDefaultImage"></image>
        <view class="product-info">
          <text class="product-name">{{ product.name }}</text>
          <text class="product-desc">{{ product.description }}</text>
          <view class="price-section">
            <text class="product-price">¥{{ product.price }}</text>
            <text class="product-sales">已售 {{ product.sales }}件</text>
          </view>
          <view class="buy-buttons">
            <button class="buy-button" @click.stop="addToCart(product)">加入购物车</button>
            <button class="buy-button" @click.stop="buyNow(product)">立即购买</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getProductList } from '@/api/product.js';
export default {
  data() {
    return {
      products: [],
      currentPage: 1,
      pageSize: 10,
      totalPages: 1,
      condidate: {}
    };
  },
  async onLoad(options) {
    await this.fetchProducts();
  },
  methods: {
    async fetchProducts() {
      try {
        const params = {
          page_index: this.currentPage,
          page_size: this.pageSize,
          condidate: this.condidate
        };
        const response = await getProductList(params);
        if (response && response.data && response.data.data && response.data.data.list) {
          this.products = response.data.data.list.map(product => ({
            ...product,
            image: product.image || '/static/default-image.jpg',
            name: product.name || '未知商品',
            price: product.price || 0,
            description: product.description || '',
            sales: product.sales || 0
          }));
          this.totalPages = Math.ceil(response.data.data.total_item_count / this.pageSize);
        } else {
          uni.showToast({ title: '获取商品失败', icon: 'none' });
        }
      } catch (error) {
        uni.showToast({ title: '网络错误', icon: 'none' });
      }
    },
    setDefaultImage(event) {
      event.target.src = '/static/default-image.jpg';
    },
    addToCart(product) {
      console.log('加入购物车:', product);
    },
    buyNow(product) {
      console.log('立即购买:', product);
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
}
.product-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.product-item {
  display: flex;
  background: #fff;
  border-radius: 15rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}
.product-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}
.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.product-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}
.product-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
}
.price-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product-price {
  font-size: 36rpx;
  color: #ff4d4f;
  font-weight: bold;
}
.product-sales {
  font-size: 24rpx;
  color: #999;
}
.buy-buttons {
  margin-top: 10rpx;
}
.buy-button {
  margin-right: 10rpx;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  padding: 10rpx 20rpx;
  font-size: 28rpx;
}
</style>
